<template>
  <div class="Hierarchy">
    <div v-if="pageConfig">
      <!-- <el-input placeholder="所有项目" size="mini" v-model="filterName">
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div>
        <span class="split-title">大屏</span>
      </div> -->
      <vue-drag
        class="scroll-view"
        group="widgetConfigs"
        handle=".label"
        v-model="widgetConfigs"
        :bubbleScroll="false"
        :animation="150"
        @change="handleChange"
      >
        <div v-for="widgetConfig in widgetConfigs" :key="widgetConfig.id">
          <WidgetConfigNode
            :widgetConfig="widgetConfig"
          ></WidgetConfigNode>
        </div>
      </vue-drag>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Provide } from 'vue-property-decorator'
import { Input } from 'element-ui'
import ApplicationEditor from '@/components/application-editor/ApplicationEditor.vue'
import FileEditableObject from '@/core/editable-object/file/FileEditableObject'
import WidgetConfigNode from './WidgetConfigNode.vue'
import WidgetConfig from '@/core/model/WidgetConfig'
import draggable from 'vuedraggable'

@Component({
  components: {
    [Input.name]: Input,
    WidgetConfigNode,
    'vue-drag': draggable,
  }
})
export default class Hierarchy extends Vue {
  @Inject('app-editor')
  public appEditor!: ApplicationEditor

  @Provide('hierarchy')
  public get hierarchy (): Hierarchy { return this }

  private filterName = ''
  

  private get fileEditableObject() {
    const currentEditableObject = this.appEditor.currentEditableObject
    if (currentEditableObject instanceof FileEditableObject) {
      return currentEditableObject
    }
    return null
  }
  
  private get file() {
    return this.fileEditableObject?.file
  }

  public get fileHandler() {
    return this.fileEditableObject?.fileHandler
  }

  private get pageConfig() {
    return this.fileHandler?.pageConfig
  }

  private get widgetConfigs() {
    return this.pageConfig?.widgetConfigs
  }

  private set widgetConfigs (widgetConfigs) {
    if (this.pageConfig && widgetConfigs) {
      this.pageConfig.widgetConfigs = widgetConfigs
    }
  }

  private get singleSelectedWidgetConfig() {
    return this.fileHandler?.singleSelectedWidgetConfig
  }

  private handleChange ({ added }: { added: { element: WidgetConfig } }) {
    if (added) {
      const widgetConfig = added.element as WidgetConfig
      const {x, y} = widgetConfig.getAbsolutePosition()
      widgetConfig.base.x = x
      widgetConfig.base.y = y
      widgetConfig.parentWidget = null
    }
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.Hierarchy {
  height: 100%;
}
</style>
